import React, { memo } from 'react';
import { Empty } from 'antd';
import classNames from 'classnames';

import { getCurrentOrgCountryCode } from '@/pages/SalaryManage/utils';
import { SINGAPORE_CODE } from '@/pages/SalaryManage/constant/countryRegion';
import EmptyPlaceHolder from '@/pages/SalaryManage/components/EmptyPlaceHolder';
import NumberFormatter from '@/pages/SalaryManage/components/NumberFormatter';
import SensitiveInfo from '@/pages/SalaryManage/components/SensitiveInfo';
import CurrencyText from '@/pages/SalaryManage/components/CurrencyText';
import styles from './index.less';

const SalaryDetail = ({ data = [], total, totalName, extra = null, emptyTitle, hideSensitive }) => (
    <div className={classNames([styles.dataWrap, { [styles.empty]: !data || data.length === 0 }])}>
        <div className={styles.dataDetail}>
            {data?.length > 0 ? (
                data.map(item => (
                    <div className={styles.itemWrap} key={item.key}>
                        <div className={styles.itemSum}>
                            <div className={styles.itemSumTitle}>{item.title}</div>
                            <SensitiveInfo hide={hideSensitive}>
                                <NumberFormatter
                                    value={item.value}
                                    color={+item.colorControl === 1}
                                    className={styles.currency}
                                    style={{
                                        color: +item.colorControl === 1 ? 'red' : '#44C69D'
                                    }}
                                />
                            </SensitiveInfo>
                        </div>
                        {item.children.map(child => (
                            <div className={styles.itemDetail} key={child.key}>
                                <span className={styles.label}>{child.title}</span>
                                {child.columnType === 0 ? (
                                    <span className={styles.currency}>
                                        <EmptyPlaceHolder value={child.value} />
                                    </span>
                                ) : (
                                    <SensitiveInfo hide={hideSensitive}>
                                        <NumberFormatter value={child.value} className={styles.currency} />
                                    </SensitiveInfo>
                                )}
                            </div>
                        ))}
                    </div>
                ))
            ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={`${emptyTitle || `${totalName}为空`}`} />
            )}
        </div>
        <div className={styles.sumMoney}>
            <span className={styles.label}>{totalName}：</span>
            <SensitiveInfo hide={hideSensitive}>
                <NumberFormatter value={total} negativeColor className={styles.currency} />
            </SensitiveInfo>
        </div>
        {extra}
    </div>
);
const SalarySheetModal = ({ salaryData = {}, hideSensitive = true, organizationCode }) => {
    const countryCode = getCurrentOrgCountryCode(organizationCode); // 获取当前的国家
    const isSingapore = countryCode === SINGAPORE_CODE; // 是否新加坡
    const {
        encryptTotalAmt,
        encryptTotalTaxAmt,
        encryptTotalPayAmt,
        addItems = [],
        lessItems = [],
        otherItems = [],
        employeeName,
        employeeNo,
        staffTips
    } = salaryData;
    return (
        <div>
            <div className={styles.baseInfo}>
                <div className={styles.flexWrap}>
                    <div className={styles.baseInfoItem}>
                        <span className={styles.label}>姓名：</span>
                        <span>{employeeName}</span>
                    </div>
                    <div className={styles.baseInfoItem}>
                        <span className={styles.label}>工号：</span>
                        <span>{employeeNo}</span>
                    </div>
                </div>

                <div className={styles.baseInfoItem}>
                    <span className={styles.label}>币种：</span>
                    <CurrencyText countryCode={countryCode} />
                </div>
            </div>
            <div className={styles.content}>
                <div className={styles.captionBox}>
                    <div className={classNames(styles.caption, styles.positive)}>薪资加项</div>
                    <div className={classNames(styles.caption, styles.negative)}>薪资减项</div>
                </div>
                {!isSingapore ? (
                    <div className={styles.header}>
                        <div className={styles.left}>
                            <div className={styles.label}>薪资总额：</div>
                            <SensitiveInfo hide={hideSensitive}>
                                <NumberFormatter value={encryptTotalAmt} negativeColor className={styles.currency} />
                            </SensitiveInfo>
                        </div>
                        <div className={styles.right}>
                            <div className={styles.left}>
                                <div className={styles.label}>税前薪资：</div>
                                <SensitiveInfo hide={hideSensitive}>
                                    <NumberFormatter
                                        value={encryptTotalTaxAmt}
                                        negativeColor
                                        className={styles.currency}
                                    />
                                </SensitiveInfo>
                            </div>
                            <div className={styles.right}>
                                <div className={styles.label}>实发薪资：</div>
                                <SensitiveInfo hide={hideSensitive}>
                                    <NumberFormatter
                                        value={encryptTotalPayAmt}
                                        negativeColor
                                        className={styles.currency}
                                    />
                                </SensitiveInfo>
                            </div>
                        </div>
                    </div>
                ) : (
                    <div className={styles.headerSingapore}>
                        <div className={styles.left}>
                            <div className={styles.label}>薪资总额：</div>
                            <SensitiveInfo hide={hideSensitive}>
                                <NumberFormatter value={encryptTotalAmt} negativeColor className={styles.currency} />
                            </SensitiveInfo>
                        </div>
                        <div className={styles.right}>
                            <div className={styles.right}>
                                <div className={styles.label}>实发薪资：</div>
                                <SensitiveInfo hide={hideSensitive}>
                                    <NumberFormatter
                                        value={encryptTotalPayAmt}
                                        negativeColor
                                        className={styles.currency}
                                    />
                                </SensitiveInfo>
                            </div>
                        </div>
                    </div>
                )}

                <div className={styles.contentDetail}>
                    <div className={styles.contentLeft}>
                        <SalaryDetail
                            data={addItems}
                            total={encryptTotalAmt}
                            totalName="薪资总额"
                            emptyTitle="未配置薪资加项"
                            hideSensitive={hideSensitive}
                        />
                    </div>
                    <div className={styles.contentRight}>
                        <SalaryDetail
                            data={lessItems}
                            total={isSingapore ? encryptTotalPayAmt : encryptTotalTaxAmt}
                            totalName={isSingapore ? '实发薪资' : '税前薪资'}
                            isSingapore
                            emptyTitle="未配置薪资减项"
                            hideSensitive={hideSensitive}
                        />
                        {/* 新加坡显示欠款情况 */}
                        {isSingapore && +salaryData?.encryptTotalDebtAmt > 0 && !otherItems?.length ? (
                            <div className={classNames(styles.dataWrap)}>
                                <div className={styles.sumMoney}>
                                    <span className={styles.label}>本月欠款：</span>
                                    <SensitiveInfo hide={hideSensitive}>
                                        <NumberFormatter
                                            value={salaryData.encryptCurrentDebtAmt}
                                            negativeColor
                                            className={styles.currency}
                                        />
                                    </SensitiveInfo>
                                </div>
                                <div className={styles.sumMoney}>
                                    <span className={styles.label}>截止上月未还：</span>
                                    <SensitiveInfo hide={hideSensitive}>
                                        <NumberFormatter
                                            value={salaryData.encryptDebtAmt}
                                            negativeColor
                                            className={styles.currency}
                                        />
                                    </SensitiveInfo>
                                </div>
                                <div className={styles.sumMoney}>
                                    <span className={styles.label}>累计欠款：</span>
                                    <SensitiveInfo hide={hideSensitive}>
                                        <NumberFormatter
                                            value={salaryData.encryptTotalDebtAmt}
                                            negativeColor
                                            className={styles.currency}
                                        />
                                    </SensitiveInfo>
                                </div>
                            </div>
                        ) : null}

                        {/* 非新加坡 */}
                        {!isSingapore ? (
                            <SalaryDetail
                                data={otherItems}
                                total={encryptTotalPayAmt}
                                totalName="实发薪资"
                                hideSensitive={hideSensitive}
                                extra={
                                    +salaryData?.encryptTotalDebtAmt > 0 ? (
                                        <>
                                            <div className={styles.sumMoney}>
                                                <span className={styles.label}>本月欠款：</span>
                                                <SensitiveInfo hide={hideSensitive}>
                                                    <NumberFormatter
                                                        value={salaryData.encryptCurrentDebtAmt}
                                                        negativeColor
                                                        className={styles.currency}
                                                    />
                                                </SensitiveInfo>
                                            </div>
                                            <div className={styles.sumMoney}>
                                                <span className={styles.label}>截止上月未还：</span>
                                                <SensitiveInfo hide={hideSensitive}>
                                                    <NumberFormatter
                                                        value={salaryData.encryptDebtAmt}
                                                        negativeColor
                                                        className={styles.currency}
                                                    />
                                                </SensitiveInfo>
                                            </div>
                                            <div className={styles.sumMoney}>
                                                <span className={styles.label}>累计欠款：</span>
                                                <SensitiveInfo hide={hideSensitive}>
                                                    <NumberFormatter
                                                        value={salaryData.encryptTotalDebtAmt}
                                                        negativeColor
                                                        className={styles.currency}
                                                    />
                                                </SensitiveInfo>
                                            </div>
                                        </>
                                    ) : null
                                }
                            />
                        ) : null}
                    </div>
                </div>
            </div>
            {staffTips ? <div className={styles.salarySheetHint}>*{staffTips}</div> : null}
        </div>
    );
};
export default memo(SalarySheetModal);
